<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/3
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>电影详情</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="css/gozha-nav.css" rel="stylesheet" />
    <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    <link href="css/external/idangerous.swiper.css" rel="stylesheet" />
    <link href="css/external/magnific-popup.css" rel="stylesheet" />
    <link href="css/style.css?v=1" rel="stylesheet" />
    <script src="js/external/modernizr.custom.js"></script>
</head>
<body>
<div class="wrapper">
    <!-- 头部导航栏-->
    <hearder>
        <jsp:include page="header.jsp"></jsp:include>
    </hearder>
    <!-- 搜索框-->
    <jsp:include page="search.jsp"></jsp:include>



    <!-- Main content -->
    <section class="container">
        <div class="col-sm-8 col-md-9">
            <div class="movie">
                <h2 class="page-heading">一条狗的使命</h2>

                <div class="movie__info">
                    <div class="col-sm-6 col-md-4 movie-mobile">
                        <div class="movie__images">
                            <span class="movie__rating">5.0</span>
                            <img alt='' src="http://placehold.it/526x773">
                        </div>
                        <div class="movie__rate">你的投票:
                            <div id='score' class="score"></div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-8">
                        <p class="movie__time">169 min</p>

                        <p class="movie__option"><strong>国家: </strong>
                            <a href="#">北美</a>
                        </p>
                        <p class="movie__option"><strong>年份: </strong>
                            <a href="#">2012</a>
                        </p>
                        <p class="movie__option"><strong>类别: </strong>
                            <a href="#">感人</a>,
                            <a href="#">爱情</a>
                        </p>
                        <p class="movie__option"><strong>发行日期 </strong>2019-05-17</p>
                        <p class="movie__option"><strong>导演: </strong>
                            <a href="#">Peter Jackson</a>
                        </p>
                        <p class="movie__option"><strong>演员: </strong>
                            <a href="#">Martin Freeman</a>,
                            <a href="#">Ian McKellen</a>,
                            <a href="#">Richard Armitage</a>,
                            <a href="#">Ken Stott</a>,
                            <a href="#">Graham McTavish</a>,
                            <a href="#">Cate Blanchett</a>,
                            <a href="#">Hugo Weaving</a>,
                            <a href="#">Ian Holm</a>,
                            <a href="#">Elijah Wood</a>
                            <a href="#">...</a>
                        </p>
                        <p class="movie__option"><strong>票房: </strong>
                            <a href="#">$1 017 003 568</a>
                        </p>

                        <div class="movie__btns">
                            <a href="#" class="btn btn-md btn--warning">买这张电影票</a>
                            <a href="#" class="watchlist">添加到购物车</a>
                        </div>

                        <div class="share">
                            <span class="share__marker">评论: </span>
                            <div class="addthis_toolbox addthis_default_style ">
                                <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                                <a class="addthis_button_tweet"></a>
                                <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <h2 class="page-heading">情节</h2>

                <p class="movie__describe">比尔博·巴金斯被卷入从可怕的巨龙斯摩格手中夺回失去的矮人王国的任务。在巫师甘道夫的突然接近下，比尔博发现自己加入了一个由传奇战士索林·奥肯盾牌领导的由十三位矮人组成的连队。他们的旅程将带他们进入荒野，穿过充满妖精和兽人的危险之地，致命的战兽和巨蜘蛛，变形人和巫师。虽然他们的目标是东方和荒地的孤独山，他们必须首先逃离地精隧道，在那里比尔博遇到的生物，将改变他的生活永远.戈勒姆。在这里，一个人和Gollum在一个地下湖边，谦逊的比尔博·巴金斯不仅发现了令他惊讶的深邃的诡计和勇气，他还拥有了戈卢姆的“珍贵”戒指，这枚戒指具有意想不到的和有用的品质.一个简单的，金戒指，它与整个中土世界的命运联系在一起，比尔博无法开始.</p>

                <h2 class="page-heading">照片和视频</h2>

                <div class="movie__media">
                    <div class="movie__media-switch">
                        <a href="#" class="watchlist list--photo" data-filter='media-photo'>234张照片</a>
                        <a href="#" class="watchlist list--video" data-filter='media-video'>10个视频</a>
                    </div>

                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!--First Slide-->
                            <div class="swiper-slide media-video">
                                <a href='https://www.youtube.com/watch?v=Y5AehBA3IsE' class="movie__media-item ">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>

                            <!--Second Slide-->
                            <div class="swiper-slide media-video">
                                <a href='https://www.youtube.com/watch?v=Kb3ykVYvT4U' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>

                            <!--Third Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>

                            <!--Four Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>

                            <!--Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                            <!--Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                            <!--First Slide-->
                            <div class="swiper-slide media-video">
                                <a href='https://www.youtube.com/watch?v=Y5AehBA3IsE' class="movie__media-item ">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                            <!--Second Slide-->
                            <div class="swiper-slide media-video">
                                <a href='https://www.youtube.com/watch?v=Kb3ykVYvT4U' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                            <!--Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                            <!--Slide-->
                            <div class="swiper-slide media-photo">
                                <a href='http://placehold.it/2100x1250' class="movie__media-item">
                                    <img alt='' src="http://placehold.it/400x240">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="page-heading">演出时间及门票</h2>
            <div class="choose-container">
                <form id='select' class="select" method='get'>
                    <select name="select_item" id="select-sort" class="select__sort" tabindex="0">
                        <option value="1" selected='selected'>思明区</option>
                        <option value="2">湖里区</option>
                        <option value="3">集美区</option>
                        <option value="4">翔安区</option>
                        <option value="5">海沧区</option>
                    </select>
                </form>

                <div class="datepicker">
                    <span class="datepicker__marker"><i class="fa fa-calendar"></i>日期</span>
                    <input type="text" id="datepicker" value='03/10/2014' class="datepicker__input">
                </div>

                <a href="#" id="map-switch" class="watchlist watchlist--map"><span class="show-map">在地图上显示电影院</span></a>

                <div class="clearfix"></div>

                <div class="time-select">
                    <div class="time-select__group group--first">
                        <div class="col-sm-4">
                            <p class="time-select__place">万达影城</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li class="time-select__item" data-time='09:40'>09:40</li>
                            <li class="time-select__item" data-time='13:45'>13:45</li>
                            <li class="time-select__item active" data-time='15:45'>15:45</li>
                            <li class="time-select__item" data-time='19:50'>19:50</li>
                            <li class="time-select__item" data-time='21:50'>21:50</li>
                        </ul>
                    </div>

                    <div class="time-select__group">
                        <div class="col-sm-4">
                            <p class="time-select__place">又见影院</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li class="time-select__item" data-time='10:45'>10:45</li>
                            <li class="time-select__item" data-time='16:00'>16:00</li>
                            <li class="time-select__item" data-time='19:00'>19:00</li>
                            <li class="time-select__item" data-time='21:15'>21:15</li>
                            <li class="time-select__item" data-time='23:00'>23:00</li>
                        </ul>
                    </div>

                    <div class="time-select__group">
                        <div class="col-sm-4">
                            <p class="time-select__place">影院1</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li class="time-select__item" data-time='09:00'>09:00</li>
                            <li class="time-select__item" data-time='11:00'>11:00</li>
                            <li class="time-select__item" data-time='13:00'>13:00</li>
                            <li class="time-select__item" data-time='15:00'>15:00</li>
                            <li class="time-select__item" data-time='17:00'>17:00</li>
                            <li class="time-select__item" data-time='19:0'>19:00</li>
                            <li class="time-select__item" data-time='21:0'>21:00</li>
                            <li class="time-select__item" data-time='23:0'>23:00</li>
                            <li class="time-select__item" data-time='01:0'>01:00</li>
                        </ul>
                    </div>

                    <div class="time-select__group">
                        <div class="col-sm-4">
                            <p class="time-select__place">影院1</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li class="time-select__item" data-time='10:45'>10:45</li>
                            <li class="time-select__item" data-time='16:00'>16:00</li>
                            <li class="time-select__item" data-time='19:00'>19:00</li>
                            <li class="time-select__item" data-time='21:15'>21:15</li>
                            <li class="time-select__item" data-time='23:00'>23:00</li>
                        </ul>
                    </div>

                    <div class="time-select__group group--last">
                        <div class="col-sm-4">
                            <p class="time-select__place">影院1</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li class="time-select__item" data-time='17:45'>17:45</li>
                            <li class="time-select__item" data-time='21:30'>21:30</li>
                            <li class="time-select__item" data-time='02:20'>02:20</li>
                        </ul>
                    </div>
                </div>
                <h2 class="page-heading">评论意见(15)</h2>

                <div class="comment-wrapper">
                    <form id="comment-form" class="comment-form" method='post'>
                        <textarea class="comment-form__text" placeholder='Add you comment here'></textarea>
                        <label class="comment-form__info">留下250个字符</label>
                        <button type='submit' class="btn btn-md btn--danger comment-form__btn">添加</button>
                    </form>

                    <div class="comment-sets">

                        <div class="comment">
                            <div class="comment__images">
                                <img alt='' src="http://placehold.it/50x50">
                            </div>

                            <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>兔宝宝</a>
                            <p class="comment__date">今天 | 03:04</p>
                            <p class="comment__message">今天天气真好</p>
                            <a href='#' class="comment__reply">回复</a>
                        </div>

                        <div class="comment">
                            <div class="comment__images">
                                <img alt='' src="http://placehold.it/50x50">
                            </div>

                            <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>兔宝宝</a>
                            <p class="comment__date">今天 | 03:04</p>
                            <p class="comment__message">今天天气真好</p>
                            <a href='#' class="comment__reply">回复</a>
                        </div>

                        <div class="comment comment--answer">
                            <div class="comment__images">
                                <img alt='' src="http://placehold.it/50x50">
                            </div>

                            <a href='#' class="comment__author"><span class="social-used fa fa-vk"></span>大肥猪</a>
                            <p class="comment__date">今天 | 10:19</p>
                            <p class="comment__message">肚子好饱</p>
                            <a href='#' class="comment__reply">回复</a>
                        </div>

                        <div class="comment comment--last">
                            <div class="comment__images">
                                <img alt='' src="http://placehold.it/50x50">
                            </div>

                            <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>Sia Andrews</a>
                            <p class="comment__date"> 22.10.2013 | 12:31 </p>
                            <p class="comment__message">吃的好饱</p>
                            <a href='#' class="comment__reply">回复</a>
                        </div>

                        <div id='hide-comments' class="hide-comments">
                            <div class="comment">
                                <div class="comment__images">
                                    <img alt='' src="http://placehold.it/50x50">
                                </div>

                                <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>Roberta Inetti</a>
                                <p class="comment__date">今天 | 03:04</p>
                                <p class="comment__message">今天和开心</p>
                                <a href='#' class="comment__reply">回复</a>
                            </div>

                            <div class="comment">
                                <div class="comment__images">
                                    <img alt='' src="http://placehold.it/50x50">
                                </div>

                                <a href='#' class="comment__author"><span class="social-used fa fa-vk"></span>我是猪</a>
                                <p class="comment__date">22.10.2013 | 14:40</p>
                                <p class="comment__message">o my god</p>
                                <a href='#' class="comment__reply">回复</a>
                            </div>
                        </div>

                        <div class="comment-more">
                            <a href="#" class="watchlist">显示更多评论</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <aside class="col-sm-4 col-md-3">
            <div class="sitebar">
                <div class="banner-wrap">
                    <img alt='banner' src="http://placehold.it/500x500">
                </div>

                <div class="banner-wrap">
                    <img alt='banner' src="http://placehold.it/500x500">
                </div>

                <div class="banner-wrap banner-wrap--last">
                    <img alt='banner' src="http://placehold.it/500x500">
                </div>


                    <div class="category category--discuss category--count marginb-sm mobile-category ls-cat">
                        <h3 class="category__title">最火电影<br><span class="title-edition">discussed posts</span></h3>
                        <ol>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                        </ol>
                    </div>

                    <div class="category category--cooming category--count marginb-sm mobile-category rs-cat">
                        <h3 class="category__title">即将上映的电影<br></h3>
                        <ol>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                            <li>
                                <a href="#" class="category__item">电影1</a>
                            </li>
                        </ol>
                    </div>

                </div>
        </aside>

    </section>
    <!-- 底部-->
    <jsp:include page="footer.jsp"></jsp:include>
<!-- JavaScript-->
<!-- jQuery 1.9.1-->
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')
</script>
<!-- Migrate -->
<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery UI -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Bootstrap 3-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<!-- Mobile menu -->
<script src="js/jquery.mobile.menu.js"></script>
<!-- Select -->
<script src="js/external/jquery.selectbox-0.2.min.js"></script>

<!-- Stars rate -->
<script src="js/external/jquery.raty.js"></script>
<!-- Swiper slider -->
<script src="js/external/idangerous.swiper.min.js"></script>
<!-- Magnific-popup -->
<script src="js/external/jquery.magnific-popup.min.js"></script>

<!--*** Google map  ***-->
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<!--*** Google map infobox  ***-->
<script src="js/external/infobox.js"></script>

<!-- Share buttons -->
<script type="text/javascript">
    var addthis_config = {
        "data_track_addressbar": true
    };
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-525fd5e9061e7ef0"></script>

<!-- Form element -->
<script src="js/external/form-element.js"></script>
<!-- Form validation -->
<script src="js/form.js"></script>

<!-- Custom -->
<script src="js/custom.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        init_MoviePage();
    });
</script>
</body>
</html>
